<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    商品名字
    <input type="text">
    商品价格
    <input type="number">
    购买数量
    <input type="number">
    <button>增加商品</button>
    <table style="max-width: 600px;margin: 20px auto" class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>购买数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items">
          <td>
            <input @change="itemCheckChange" type="checkbox" v-model="item.checked">
            <span>{{item.name}}</span>
          </td>
          <td>
            ￥{{item.price}}
          </td>
          <td>
            <button @click="addNum(index)" class="btn btn-xs">+</button>
            <span>{{item.num}}</span>
            <button @click="reduceNum(index)" class="btn btn-xs">-</button>
          </td>
          <td>
            ￥{{ (item.price * item.num).toFixed(2) }}
          </td>
          <td>
            <button @click="delItem(index)" class="btn btn-sm btn-danger">删除</button>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>合计</td>
          <td colspan="4">
            全选：
            <input v-model="allChecked" @change="allCheckedChange" type="checkbox">
            总价格：￥{{total}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        item: {
          name: '',
          num: 0,
          price: 0
        },
        items: [
          {
            name: '商品1',
            num: 1,
            price: 9.9,
            checked: true
          },
          {
            name: '商品2',
            num: 1,
            price: 19.9,
            checked: true
          },
          {
            name: '商品3',
            num: 1,
            price: 39.9,
            checked: true
          },
          {
            name: '商品4',
            num: 1,
            price: 49.9,
            checked: false
          },
          {
            name: '商品5',
            num: 1,
            price: 1999.9,
            checked: true
          }
        ],
        allChecked: true,
        total: 0
      },
      methods: {
        allCheckedChange() {
          // 手动改变全选状态
          this.items.forEach(item => {
            item.checked = this.allChecked
          })
          this.calcTotal();
        },
        itemCheckChange() {
          // 商品选中状态发生改变
          this.calcTotal();
          // 商品选中状态发生改变时 改变全选的状态
          this.setAllChecked();
        },
        setAllChecked() {
          // 判断是否全选
          /* 
            判断所有的商品 是否都选中   
              都选中 全选
              否则 取消全选
          */
          const allChecked = this.items.every(item => item.checked);
          this.allChecked = allChecked;
        },
        delItem(index) {
          // 删除商品
          if (confirm('您确认删除吗?')) {
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        reduceNum(index) {
          // 减少购买数量
          this.items[index].num--;
          // 控制购买最少数量
          if (this.items[index].num <= 1) {
            this.items[index].num = 1;
          }
          // 计算总价格
          this.calcTotal();
        },
        addNum(index) {
          // 增加购买数量
          this.items[index].num++;
          // 重新计算总价格
          this.calcTotal();
        },
        calcTotal() {
          // 计算总价格
          /* 
            所有的 已经选中的商品价格*数量总和
          */
          //  去除未选中商品
          const checkedItems = this.items.filter(item => item.checked);
          this.total = 0;
          checkedItems.forEach(item => {
            this.total += item.price * item.num
          })
          this.total = parseFloat(this.total.toFixed(2));
        }
      }
    })

    vm.calcTotal();
    vm.setAllChecked();
  </script>
</body>

</html>